<template>
	<view>
		<view class="bofang">
			
		</view>
		<view class="cate">
			<view class="iconfont icon-aixin"></view>
			<view class="iconfont icon-xiaoxi"></view>
			<view class="iconfont icon-zengjia"></view>
		</view>
		<view class="pao">
			<view class="time">02:20</view>
			<view class="xian"></view>
			<view class="time">03:50</view>
		</view>
		<view class="play">
			<view class="iconfont icon-huanyihuan play01"></view>
			<view class="iconfont icon-jiantouxia play02"></view>
			<view class="iconfont icon-bofang play03"></view>
			<view class="iconfont icon-jiantouyou paly02"></view>
			<view class="iconfont icon-dingdan play01"></view>
		</view>
	</view>
</template>

<script>
	import yangLongPressCircleProgress from '../../components/yang-longPressCircleProgress/yang-longPressCircleProgress.vue';
	export default {
		components:{
		    yangLongPressCircleProgress
		},
		data () {
			return {
				text: ""
			}
		},
		methods: {
			finish(){
			    this.text="完成"
			},
			clear(){
			    this.$refs.progress.clear()
			    this.text="长按开始"
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #262E3A;
		.bofang {
			width: 414rpx;
			height: 414rpx;
			margin: 244rpx auto;
			border-radius: 50%;
			border: 16rpx solid #8F8F94;
		}
		.cate {
			display: flex;
			justify-content: space-around;
			view {
				width:72rpx;
				height:72rpx;
				font-size: 34rpx;
				text-align: center;
				line-height: 72rpx;
				color: #fff;
			}
			.iconfont {
				font-size: 40rpx;
			}
		}
		.pao {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 68rpx 0 76rpx 0;
			.time {
				width:68rpx;
				height:28rpx;
				font-size:20rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(90,94,100,1);
				line-height:28rpx;
			}
			.xian {
				width: 514rpx;
				height:4rpx;
				background:rgba(68,71,74,1);
				border-radius:4rpx;
			}
		}
		.play {
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #fff;
			.play01 {
				width: 44rpx;
				height: 44rpx;
				font-size: 44rpx;
			}
			.play02 {
				width: 36rpx;
				height: 36rpx;
				font-size: 36rpx;
			}
			.play03 {
				width: 92rpx;
				height: 92rpx;
				font-size: 92rpx;
			}
		}
	}
</style>
